<template>
  <div class="simpleVideo" v-if="videoInfo" @click="toArticle">
    <div class="img">
      <van-image
        width="auto"
        height="94.5px"
        lazy-load
        radius="8px"
        :src="videoInfo.cover"
      />
      <div class="time">{{ videoInfo.duration | time }}</div>
    </div>
    <div class="right">
      <div class="title">{{ videoInfo.title }}</div>
      <div class="sub">
        播放量&nbsp;{{
          videoInfo.count.count_view | formatter
        }}&nbsp;·&nbsp;喜欢&nbsp;{{ videoInfo.count.count_like | formatter }}
      </div>
      <div class="author">
        <div class="avatar">
          <van-image
            width="16px"
            height="16px"
            lazy-load
            round
            :src="videoInfo.author.userinfo.avatar"
          />
        </div>
        <div class="username">{{ videoInfo.author.userinfo.username }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["videoInfo"],
  methods: {
    toArticle() {
      // console.log("toArticle", this.videoInfo.id);
      this.$router.push({ path: "article", query: { id: this.videoInfo.id } });
      //   window.location.reload();
    },
  },
  filters: {
    time: function (text) {
      let minute =
        Math.floor(text / 60) < 10
          ? `0${Math.floor(text / 60)}`
          : Math.floor(text / 60);
      let second = text % 60 < 10 ? `0${text % 60}` : text % 60;
      return `${minute}'${second}''`;
    },
    formatter: function (value) {
      if (value >= 1000 && value < 10000) {
        value = (value / 1000).toFixed(1) + "k";
      }
      if (value >= 10000 && value < 10000000) {
        value = (value / 10000).toFixed(1) + "w";
      }
      return value;
    },
  },
};
</script>

<style lang="scss" scoped>
.simpleVideo {
  padding: 16px 0;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  align-items: center;

  .img {
    background-color: black;
    width: 168px;
    // height: 95px;
    position: relative;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;

    .time {
      position: absolute;
      right: 5px;
      bottom: 4px;
      font-size: 12px;
      color: white;
      text-shadow: 1px 1px #000;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
      font-size: 15px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      margin-bottom: 5px;
    }

    .sub {
      font-size: 12px;
      color: #999;
      margin-bottom: 5px;
    }

    .author {
      display: flex;
      align-items: center;

      .avatar {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid #f7f7f7;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 6px;
      }

      .username {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
